<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>社区团购</title>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/vue-router.js"></script>
<!--    主要替换的地方就是css和最下面的js文件-->
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/user.css"/>
</head>
<body>

    <div id="app">
        <!--顶部显示标题-->
        <div class="layui-container">
            <div class="layui-row head-nav">
                <div class="layui-col-md1">
                    <img src="images/wopinla-logo.jpg" height="80px">
                </div>
                <div class="layui-col-md11 title">
                    <i class="layui-icon layui-icon-cart" style="font-size: 14px; color: #333333;"></i>  用户信息如下
                </div>
            </div>
        </div>


<!--      v-if标签实现差别显示-->
<!--        用v-for实现所有的遍历实现-->
    <div class="users-info" v-for="item in userlist">
        <div>
            <div>{{item.username}}</div>
            <div>{{item.id}}</div>
            <div>{{item.password}}</div>
        </div>

    </div>
</div>
<script src="js/user.js"></script>

</body>
</html>